<div class="pure-view-container">
  <div class="x-view-title">${t('ui.infrastructure.lovDetail.title.lovDetail')}</div>
  <link href="${appCss('static/app/infrastructure/lov/lov-detail.css')}" rel="stylesheet" />
  <div class="x-search-bar"></div>
  <div class="x-tool-bar"></div>
  <table data-x-ui="lovItemTable" class="x-table-custom">
    <thead>
      <tr>
        <th data-field="id" data-visible="false">ID</th>
        <th data-field="valueCode">${t('ui.infrastructure.lovDetail.field.valueCode')}</th>
        <th data-field="valueName">${t('ui.infrastructure.lovDetail.field.valueName')}</th>
        <th data-field="valueDesc">${t('ui.infrastructure.lovDetail.field.valueDesc')}</th>
        <th data-field="showOrder">${t('ui.infrastructure.lovDetail.field.showOrder')}</th>
        <th data-field="enableFlagDesc">${t('ui.system.common.field.enableFlag')}</th>
        <th>${t('ui.system.common.field.operate')}</th>
      </tr>
    </thead>
  </table>
  <div data-x-ui="newLovItemDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.infrastructure.lovDetail.dialog.newLovItem')}</h5><button
            type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group x-form-required"><label
                for="valueCode">${t('ui.infrastructure.lovDetail.field.valueCode')}</label><input type="text"
                class="form-control" id="valueCode" name="valueCode" data-x-name="new.valueCode"
                placeholder="${t('ui.system.common.placeholder.inputCodeLimitLength', 1, 50)}" /></div>
            <div class="form-group x-form-required"><label
                for="valueName">${t('ui.infrastructure.lovDetail.field.valueName')}</label><input type="text"
                class="form-control" id="valueName" name="valueName" data-x-name="new.valueName"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 1, 100)}" /></div>
            <div class="form-group"><label
                for="valueDesc">${t('ui.infrastructure.lovDetail.field.valueDesc')}</label><input type="text"
                class="form-control" id="valueDesc" name="valueDesc" data-x-name="new.valueDesc"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 200)}" /></div>
            <div class="form-group x-form-required"><label
                for="showOrder">${t('ui.infrastructure.lovDetail.field.showOrder')}</label><input type="text"
                class="form-control" id="showOrder" name="showOrder" data-x-name="new.showOrder"
                placeholder="${t('ui.system.common.placeholder.inputDigits')}" /></div>
            <div class="form-group"><label
                for="enableFlag">${t('ui.system.common.field.enableFlag')}</label><select class="form-control"
                id="enableFlag" name="enableFlag" data-x-name="new.enableFlag">
                <option value="true" selected="">${t('ui.system.common.option.enableFlag.true')}</option>
                <option value="false">${t('ui.system.common.option.enableFlag.false')}</option>
              </select></div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <div data-x-ui="editLovItemDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.infrastructure.lovDetail.dialog.editLovItem')}</h5><button
            type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form><input type="hidden" id="id" name="id" data-x-name="edit.id" /><input type="hidden" id="valueSetId"
              name="valueSetId" data-x-name="edit.valueSetId" /><input type="hidden" id="versionNumber"
              name="versionNumber" data-x-name="edit.versionNumber" />
            <div class="form-group x-form-required"><label
                for="valueCode">${t('ui.infrastructure.lovDetail.field.valueCode')}</label><input type="text"
                class="form-control" id="valueCode" name="valueCode" data-x-name="edit.valueCode"
                placeholder="${t('ui.system.common.placeholder.inputCodeLimitLength', 1, 50)}" /></div>
            <div class="form-group x-form-required"><label
                for="valueName">${t('ui.infrastructure.lovDetail.field.valueName')}</label><input type="text"
                class="form-control" id="valueName" name="valueName" data-x-name="edit.valueName"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 1, 100)}" /></div>
            <div class="form-group"><label
                for="valueDesc">${t('ui.infrastructure.lovDetail.field.valueDesc')}</label><input type="text"
                class="form-control" id="valueDesc" name="valueDesc" data-x-name="edit.valueDesc"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 200)}" /></div>
            <div class="form-group x-form-required"><label
                for="showOrder">${t('ui.infrastructure.lovDetail.field.showOrder')}</label><input type="text"
                class="form-control" id="showOrder" name="showOrder" data-x-name="edit.showOrder"
                placeholder="${t('ui.system.common.placeholder.inputDigits')}" /></div>
            <div class="form-group"><label
                for="enableFlag">${t('ui.system.common.field.enableFlag')}</label><select class="form-control"
                id="enableFlag" name="enableFlag" data-x-name="edit.enableFlag">
                <option value="true" selected="">${t('ui.system.common.option.enableFlag.true')}</option>
                <option value="false">${t('ui.system.common.option.enableFlag.false')}</option>
              </select></div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <div class="x-footer-bar"><button data-x-ui="createBtn" type="button"
      class="btn btn-primary">${t('ui.infrastructure.lovDetail.btn.create')}</button><button
      data-x-ui="backBtn" type="button" class="btn btn-secondary">${t('ui.system.common.btn.back')}</button>
  </div>
  <script src="${appJs('app/infrastructure/lov/lov-detail.js')}" type="text/javascript"></script>
</div>